<template>
  <div class="system_integration_formPage">
    <c-title :hide="false" :text="pageName" />
    <div class="pageBox">
      <van-cell-group>
        <van-field v-model="name" :readonly="dis_readonly" required label="姓名" placeholder="请输入姓名" />
        <van-cell title="性别" is-link :value="sexC" @click="showTap" required title-style="text-align:left" />
        <van-field v-model="mobile" :readonly="dis_readonly" required label="电话" placeholder="请输入电话" />
        <van-field v-model="email" :readonly="dis_readonly" required label="邮箱" placeholder="请输入邮箱" />
        <van-field v-model="age" :readonly="dis_readonly" required label="年龄" placeholder="请输入年龄" />
        <van-field v-model="height" :readonly="dis_readonly" required label="身高" placeholder="请输入身高">
          <template #button>
            <span class="sd">cm</span>
          </template>
        </van-field>
        <van-field v-model="weight" :readonly="dis_readonly" required label="体重" placeholder="请输入体重">
          <template #button>
            <span class="sd">kg</span>
          </template>
        </van-field>
        <van-field v-model="no" readonly="true" required label="设备编号" placeholder="请输入设备编号" />
      </van-cell-group>
    </div>
    <div class="posBtn set-pc-style">
      <div class="edit" v-if="$route.name == 'system_integration_verify'" @click="tapBtnEdit">修改信息</div>
      <div class="btn" v-if="$route.name != 'system_integration_edit'" @click="tapBtn">{{ $route.name == "system_integration_verify" ? "确认检测" : "提交信息" }}</div>
      <div class="btn" v-if="$route.name == 'system_integration_edit'" @click="tapBtn">重新提交</div>
    </div>
    <van-popup v-model="show" round position="bottom">
      <van-picker title="性别" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" :default-index="gender" />
    </van-popup>
  </div>
</template>
<script>
import _ from "lodash";
export default {
  data() {
    return {
      name: "",
      sex: "",
      mobile: "",
      email: "",
      age: "",
      height: "",
      weight: "",
      no: "",
      pageName: "",
      gender: 0,
      show: false,
      columns: ["女", "男"],
      dis_readonly: false
    };
  },
  activated() {
    this.pageName = this.$route.meta.title;
    if (this.$route.query.sn) {
      this.no = this.$route.query.sn;
    }
    if (this.$route.params.sn) {
      this.no = this.$route.params.sn;
    }
    if (this.$route.name == "system_integration_verify") {
      this.dis_readonly = true;
    }
    this.getData();
  },
  computed: {
    sexC() {
      if (this.sex == "") {
        return this.columns[this.gender];
      } else {
        return this.sex;
      }
    }
  },
  methods: {
    showTap() {
      if (this.dis_readonly) return;
      this.show = true;
    },
    tapBtn() {
      if (this.$route.name == "system_integration_edit") {
        // 重新提交
        this.save();
      } else if (this.$route.name == "system_integration_verify") {
        // 提交检测
        this.sumbit();
      } else if (this.$route.name == "system_integration_formPage") {
        // 首次提交信息
        this.save();
      }
    },
    tapBtnEdit() {
      this.$router.push(this.fun.getUrl("system_integration_edit", { sn: this.no }));
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.body-health-check.api.relate-member.index", {}, "");
      if (result) {
        if (data.member_info) {
          if(this.$route.query.sn){
            if(this.$route.query.sn != data.member_info.device_no) return this.$toast("请扫已绑定设备");
            // 如果链接上带了sn参数，并且有信息数据，就是老用户直接跳转检测页面
            this.$router.replace(this.fun.getUrl("system_integration_verify", { sn: this.no }));
            return
          }
          this.name = data.member_info.realname;
          this.sex = data.member_info.gender_name;
          this.gender = data.member_info.gender;
          this.mobile = data.member_info.mobile;
          this.email = data.member_info.email;
          this.age = data.member_info.age;
          this.height = data.member_info.height;
          this.weight = data.member_info.weight;
        }
      }
    },
    onConfirm(val, ind) {
      this.sex = val;
      this.gender = ind;
      this.show = false;
    },
    onCancel() {
      this.show = false;
    },
    async sumbit() {
      let { data, msg, result } = await $http.post("plugin.body-health-check.api.relate-member.start-check", {}, "");
      if (result) {
        this.$toast(msg);
        this.$router.push(this.fun.getUrl("system_integration_member", {}, {}));
      } else {
        if (msg == "暂无检测次数") {
          this.$dialog.confirm({ message: "暂无检测次数", confirmButtonText: "去购买", confirmButtonColor: "#F15353", cancelButtonColor: "#7E7E7E" }).then(() => {
            this.$router.push(this.fun.getUrl("system_integration_search", {}, {}));
          });
          return;
        }
        this.$toast(msg);
      }
    },
    verify() {},
    async save() {
      let json = {
        form: {
          realname: this.name,
          gender: this.gender,
          mobile: this.mobile,
          email: this.email,
          age: this.age,
          height: this.height,
          weight: this.weight,
          device_no: this.no
        }
      };
      for (const key in json.form) {
        if (_.isEmpty(json.form[key]) && key != "gender") {
          return this.$toast("请完善信息");
        }
      }
      let { msg, result } = await $http.post("plugin.body-health-check.api.relate-member.store", json, "");
      if (result) {
        this.$toast("保存成功");
        this.$router.replace(this.fun.getUrl("system_integration_verify", { sn: this.no }));
      } else {
        this.$toast(msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.system_integration_formPage {
  min-height: 100vh;
  .pageBox {
    margin: 0.63rem 0.72rem;
    box-sizing: border-box;
    overflow: hidden;
    background: #ffffff;
    border-radius: 0.5rem;
  }
  .posBtn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3.75rem;
    background: #ffffff;
    box-shadow: 0rem -0.03rem 0.31rem 0.03rem #f5f5f5;
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    box-sizing: border-box;
    .edit {
      width: 6.25rem;
      height: 2.5rem;
      flex-shrink: 0;
      border-radius: 1.28rem;
      border: 0.03rem solid #aaaab3;
      margin-right: 0.75rem;
      font-weight: 500;
      font-size: 0.94rem;
      color: #00001c;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .btn {
      flex: 1;
      height: 2.5rem;
      background: #f15353;
      border-radius: 1.28rem;
      text-align: center;
      font-weight: 500;
      font-size: 0.94rem;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .sd {
    color: #000;
  }
}
</style>
